<template>
  <div class="breadcrumb-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(route, index) in breadcrumbList" :key="index" :to="{ path: route.path }">
        {{ route.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>import {onMounted, ref, watch} from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const breadcrumbList = ref([]);

//生成面包屑
const generateBreadcrumb = () => {
  const matchedRoutes = route.matched.filter(record => record.path && record.meta.title);
  breadcrumbList.value = matchedRoutes.map((route, index) => ({
    path: index === 0 ? route.path : matchedRoutes.slice(0, index + 1).reduce((prev, current) => `${prev}/${current.path}`, ''),
    meta: route.meta
  }));
};

//组件初始化
/*onMounted(() => {
  generateBreadcrumb();
});*/

//监听路由变化
watch(route, () => {
  generateBreadcrumb();
});
</script>

<style scoped>
.breadcrumb-container {
  display: flex;
  align-items: center;
  color: black;
  height: 24px;
}

</style>